<template>
  <div class="zhiboxitong_left">
    <div>
      <img src="../../../static/img/logo.jpg" class="logo_image" />
    </div>
    <div class="b_navs">
      <div
        @click="go('/zhiboxitong/zhiboxiaoshou')"
        class="b_nav menu_list_one"
        :class="act == 1?'navtitleact':'navtitle'"
        style="margin-top:20px"
      >
        <img class="logo_images" src="../../../static/img/组合 3119.svg" />商城页(多商品)
      </div>
      <div
        @click="go('/zhiboxitong/meitituiguang')"
        class="b_nav menu_list_one"
        :class="act == 2?'navtitleact':'navtitle'"
      >
        <img class="logo_images" src="../../../static/img/组合 3120.svg" />商品页(单商品)
      </div>
      <div
        @click="go('/zhiboxitong/xiaochengxu')"
        class="b_nav menu_list_one"
        :class="act == 3?'navtitleact':'navtitle'"
      >
        <img class="logo_images" src="../../../static/img/组合 3122.svg" />小程序推广
      </div>
      <div
        @click="go('/zhiboxitong/dingdanguanli')"
        class="b_nav menu_list_one"
        :class="act == 4?'navtitleact':'navtitle'"
      >
        <img class="logo_images" src="../../../static/img/组合 3121.svg" />订单管理
      </div>
      <div>
        <div
          class="b_nav menu_list_one"
          style="cursor: pointer;"
          v-if="shopid == 127837 || shopid == 50481"
          @click="totongji"
          to="/login"
          :class="act == 9?'navtitleact':'navtitle'"
        >
          <img class="logo_images" src="../../../static/img/直播.svg" />直播统计
        </div>
      </div>
      <div
        @click="go('/zhiboxitong/shoukuanpeizhi')"
        class="b_nav menu_list_one"
        :class="act == 6?'navtitleact':'navtitle'"
      >
        <img class="logo_images" src="../../../static/img/组合 3123.svg" />商城配置
      </div>
      <div
        @click="go('/zhiboxitong/yongqianxuzhi')"
        class="b_nav menu_list_one"
        :class="act == 7?'navtitleact':'navtitle'"
      >
        <img class="logo_images" src="../../../static/img/编组.svg" />用前须知
      </div>
      <!-- <div @click="go('/zhiboxitong/shoukuanpeizhi')" class="b_nav">收款配置</div> -->
      <div
        @click="go('/zhiboxitong/tousu')"
        class="b_nav menu_list_one"
        :class="act == 8?'navtitleact':'navtitle'"
      >
        <img class="logo_images" src="../../../static/img/投诉建议.svg" />投诉与反馈
      </div>
      <!-- <router-link class="b_nav" to="/zhiboxitong/zhiboxiaoshou">商城页(多商品)</router-link>
      <router-link class="b_nav" to="/zhiboxitong/meitituiguang">商品页(单商品)</router-link>
      <router-link class="b_nav" to="/zhiboxitong/xiaochengxu">小程序推广</router-link>
      <router-link class="b_nav" to="/zhiboxitong/dingdanguanli">订单管理</router-link>-->
      <!-- <router-link class="b_nav" to="/zhiboxitong/shoukuanpeizhi">收款配置</router-link> -->
      <!-- <router-link class="b_nav" to="/zhiboxitong/yongqianxuzhi">用前须知</router-link> -->
      <!-- <router-link class="b_nav" to="/zhiboxitong/tousu">投诉与反馈</router-link> -->
      <!-- <input type="text" v-model="sqlink" >
      <button @click="open">跳转</button>-->
    </div>
    <div class="upload_down">
      <img src="../../../static/img/upload.jpg" class="upload_image" alt />
      <div>
        <el-button
          type="primary"
          round
          style="background:#005AFF;border:none"
          @click="downClick"
        >下载使用说明</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "zhiboxitong_left",
  data() {
    return {
      shopid: "",
      sqlink: ""
    };
  },
  created() {
    this.shopid = localStorage.getItem("sc_shopid");

    //判断蓝条
    if (
      [
        "web/zhiboxitong/plugManage",
        "/zhiboxitong/zhiboxiaoshou"
      ].findIndex(item => this.$route.fullPath.includes(item))
    ) {
      this.act = 1;
    }
    if (this.$route.fullPath.includes("/zhiboxitong/meitituiguang")) {
      this.act = 2;
    }
    if (this.$route.fullPath.includes("/zhiboxitong/xiaochengxu")) {
      this.act = 3;
    }
    if (this.$route.fullPath.includes("/zhiboxitong/dingdanguanli")) {
      this.act = 4;
    }
    // if(this.$route.fullPath.includes('/zhiboxitong/dingdanguanli')){
    //   this.act = 5
    // }
    if (this.$route.fullPath.includes("/zhiboxitong/shoukuanpeizhi")) {
      this.act = 6;
    }
    if (this.$route.fullPath.includes("/zhiboxitong/yongqianxuzhi")) {
      this.act = 7;
    }
    if (this.$route.fullPath.includes("/zhiboxitong/tousu")) {
      this.act = 8;
    }
    if (this.$route.fullPath.includes("/zhiboxitong/chuli")) {
      this.act = 8;
    }
    if (this.$route.fullPath.includes("/login")) {
      this.act = 9;
    }
  },
  mounted() {},
  methods: {
    downClick: function() {
      const a = document.createElement("a");
      a.setAttribute("download", "敢探号商城使用说明.pdf");
      a.setAttribute("href", "/web/static/shiyongshuoming.pdf");
      a.click();
    },
    //跳转
    open() {
      window.open(this.sqlink);
    },
    totongji() {
      window.open("https://91haoka.cn/gth/#/zhibodaka");
    }
  }
};
</script>

<style scoped lang="less">
.upload_down {
  height: 170px;
  margin-top: 50px;
  background: white;
  border-radius: 22px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .upload_image {
    margin-top: 20px;
    width: 70px;
    height: 70px;
  }
}
.logo_image {
  height: 100%;
  width: 258px;
}
.navtitleact {
  background: rgb(0, 90, 255);
  width: 100%;
  height: 60px;
  color: white !important;
  box-shadow: 0px 10px 20px 0px rgba(0, 90, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  img {
    filter: drop-shadow(rgb(255, 255, 255) 100px 0);
    transform: translateX(-100px);
    position: relative;
    top: -1px;
  }
}

.navtitle {
  width: 100%;
  height: 60px;
  cursor: pointer;
  &:hover {
    background: rgb(0, 90, 255);
    width: 100%;
    height: 60px;
    color: white !important;
    box-shadow: 0px 10px 20px 0px rgba(0, 90, 255, 0.1);
    border-radius: 16px;
    img {
      filter: drop-shadow(rgb(255, 255, 255) 100px 0);
      transform: translateX(-100px);
    }
  }
}
.menu_list_one {
  margin-top: 10px;
}
.zhiboxitong_left {
  // position: fixed;
  height: 100vh;
  padding: 15px;
  box-sizing: border-box;
  background: #fafafe;
  .flex {
    display: flex;
    flex-wrap: wrap;
  }
  .flexb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .flexc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .flexbc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .flexcc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .b_navs {
    .b_nav {
      display: block;
      text-align: center;
      line-height: 66px;
      color: #5e6c93;
      font-size: 16px;
      cursor: pointer;
      display: flex;
    }
    .router-link-active {
      color: white;
      background: #335dff;
    }
  }
}
.logo_images {
  width: 35px;
  height: 35px;
  margin: 15px 1px 0 15px;
}
</style>
